<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="A demo of OwlCarousel2 with one item slide.">
	<meta name="keywords" content="owl, owl carousel2, demo, one item">
	<meta name="author" content="Steper Kuo">
	<title>Owl demo: one item page slide</title>

	<!-- Favicons -->
	<link rel="apple-touch-icon" sizes="152x152" href="https://gyx8899.github.io/YX-WebThemeKit/assets/img/apple-icon-152x152.png">
	<link rel="icon" type="image/png" sizes="16x16" href="https://gyx8899.github.io/YX-WebThemeKit/assets/img/favicon-16x16.png">

	<!-- Style custom *** CSS -->
	<link rel="stylesheet" href="styles/owl.carousel.min.css">
	<link rel="stylesheet" href="styles/owl.theme.css">
	<link rel="stylesheet" href="styles/owl-oneSlide.css">
	<style data-toggle="previewCode" data-target="#demoWrap" data-collapse="on" type="text/css">
		/* Demo's CSS here */
		.owl-carousel .item
		{
			height: 10rem;
			background: #4DC7A0;
			padding: 1rem;
		}
		.owl-carousel .item
		{
			height: auto;
		}
	</style>

	<!--Jquery.js, HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<!--[if lt IE 9]>
	<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->

</head>
<body>
<!-- Script Preload code *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/fn-pre-loader/preLoader.js?type=split-ssc"></script>

<!-- Script Fundebug code *** JS -->
<script src="https://js.fundebug.cn/fundebug.0.3.6.min.js" apikey="f3b60739271056d85641a316cd13350f5960922b510427e3ec514bc3f0a74ac5"></script>

<main>

	<!-- Demos -->
	<section id="demo">
		<div class="row">
			<div id="demoWrap" class="large-12 columns">
				<div data-toggle="previewCode" data-target="#demoWrap" data-collapse="on">
					<!--Demo's html here-->
					<div id="owlOne" class="owl-carousel owl-theme">
						<div class="item"><img src="images/fullimage1.jpg" alt=""></div>
						<div class="item"><img src="images/fullimage2.jpg" alt=""></div>
						<div class="item"><img src="images/fullimage3.jpg" alt=""></div>
					</div>
				</div>
				<h3 id="overview">Overview</h3>
				<!--Introduction here-->
				<p>
					<b>Demo: One</b><br>
					1. Slider-One item;<br>
					2. Auto width/height;<br>
					3. Nav-prev/next over item;<br>
					4. Dots over item;<br>
				</p>
			</div>
		</div>
	</section>
</main>

<!-- Script Common *** JS -->
<script src="https://gyx8899.github.io/YX-JS-ToolKit/dist/assets/js/common.min.js"></script>

<!-- Script Config *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/assets/js/yx-theme-config.min.js"></script>

<!-- Script Demo *** JS -->
<script type="text/javascript" src="scripts/owl.carousel.custom.js"></script>
<!--<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>-->

<script data-toggle="previewCode" data-target="#demoWrap" type="text/javascript">
	// Demo's JS here
	window.addEventListener("load", function () {
		$('#owlOne').owlCarousel({
			margin: 0,
			nav: true,
			navText: ['', ''],
			items: 1,
			loop: true,
			dots: true
		});

		// Bind click: use owlOnClick to ignore drag's click trigger
		owlOnClick($('.owl-carousel'), '.item', function (e) {
			var $currentItem = $(e.target).closest('.item');
			alert($currentItem[0].classList);
		});
	}, false);
</script>

</body>
</html>